<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Home :: X40P Project</title>
    <link rel="stylesheet" href="./assets/css/style.css" media="all" />
    <script type="text/javascript" src="./assets/js/jquery-1.5.2.min.js"></script>
    <script type="text/javascript" src="./assets/js/item.detail.js"></script>
</head>
<body>
<div class="container_12" id="wrapper">
    <div class="container_12" id="header">
        <div class="grid_4" id="logo">
            <h1>X40P Project</h1>
            <h2>A production of CLGT team</h2>
        </div>
        <div class="grid_8">
            <form action="" method="get" name="" class="inline" id="form-login">
                <label>Email
                <input type="text" value="" name="email" class="text sf" />
                </label>
                <label>Password
                <input type="password" name="password" class="text sf" />
                </label>
                <input type="submit" name="" value="Login" class="button" />
            </form>
        </div>
        <div class="clear"></div>
        
        <div class="grid_12" id="search">
            <form action="" method="get">
                <input name="q" type="text" value="" class="text bf" />
                <input type="submit" name="" value="Search" class="button" />
            </form>
        </div>
        <div class="clear"></div>
    </div><!-- /header -->
    
    <div class="container_12" id="main">
        <div class="grid_8">
            <h3>This is a long and very very long product name</h3>
            <img src="./assets/images/img-590.jpg" alt="" width="590" />
            <p style="text-align: center;">
                <a href="" title="">Live Preview</a>
                <a href="" title="">Screenshots</a>
            </p>
            
            <h3>Description</h3>
            
            <div class="">
                  <p>jQuery twitter scroller in 3 colors. Black, White and Blue<br />
                    Scrolls horizontally width a fade effect.
                    Very ease to integrate in your site.</p>


                    <h4>Features</h4>
                    <ul>
                        <li>Display tweets from a specified user, a specified #hashtag, word or sentence</li>
                        <li>Pauses at mouseover</li>
                        <li>Adjustable width and speed</li>
                        <li>Specify how many tweets to display</li>
                        <li>Replaces url’s, hashtags and users into links</li>
                        <li>Very easy to add more colors.</li>
                    </ul>
                    <p>
                    I added lots of comments in the css and javascript file to understand the functions.
                    <br>note: The twitter search  API  is limited to 7 days.
                    <br><br>
                    I hope you like it!
                    </p>
            </div>
            
            <h3>More items from <strong>this author</strong></h3>
            <div id="home-item-list">
                <ul class="items">
                    <li><a href="" title=""><img src="./assets/images/img-80.jpg" alt="" /></a></li>
                    <li><a href="" title=""><img src="./assets/images/img-80.jpg" alt="" /></a></li>
                    <li><a href="" title=""><img src="./assets/images/img-80.jpg" alt="" /></a></li>
                    <li><a href="" title=""><img src="./assets/images/img-80.jpg" alt="" /></a></li>
                    <li><a href="" title=""><img src="./assets/images/img-80.jpg" alt="" /></a></li>
                    <li><a href="" title=""><img src="./assets/images/img-80.jpg" alt="" /></a></li>
                </ul>
            </div>
        </div>
        <div class="grid_4">
            <div class="prices error">
                <h4>Regular License</h4>
                <p>For use in blah blah blah</p>
                <span>$100</span>
                <form name="frm-purchase" method="post" action="">
                    <input type="submit" name="submit" value="Purchase" />
                </form>
            </div>
            
            <h3>Author</h3>
            <div class="author">
                <a href="" title=""><img src="./assets/images/img-50.jpg" alt="" class="avatar" /></a>
                <p>
                    <h4><a href="">Nguyễn Văn Tèo</a></h4>
                </p>
            </div>
            <div class="clear"></div>
            
            <h3>Metadata</h3>
            <div class="metadata">
                <dl>
                    <dt>Created on</dt>
                    <dd>Apr 20, 2011</dd>
                    <dt>Compatible Browsers</dt>
                    <dd>IE7, IE8, IE9, FireFox 2, FireFox 3, Firefox 3.5, Firefox 3.6, Firefox 4, Safari 4, Safari 5, Opera, Chrome 4, Chrome 5</dd>
                    <dt>Files Included</dt>
                    <dd>JavaScript JS, JavaScript JSON, HTML, CSS</dd>
                </dl>
            </div>
            <div class="clear"></div>
            
            <h3>Add to collection</h3>
            <form name="frm-add-collection" method="post" action="" enctype="multipart/form-data">
                <p>
                    <select name="collection" class="mf">
                        <option value="123">My collection</option>
                        <option value="123">My collection</option>
                        <option value="123">My collection</option>
                        <option value="123">My collection</option>
                    </select>
                </p>
                <p>
                    or
                    <a href="" title="" id="lnk-create-new-collection">Create a new collection</a>
                </p>
                <div id="form-new-collection">
                    <p>
                        <label>New collection's name<br />
                        <input type="text" value="" name="name" class="text mf" />
                        </label>
                    </p>
                    <p>
                        <label>Description<br />
                        <textarea name="description" id="" cols="30" rows="10" class="text mf"></textarea>
                        </label>
                    </p>
                    <p>
                        <label>Image<br />
                        <input type="file" name="image" class="text mf" />
                        </label>
                    </p>
                    <p>
                        <label><input type="checkbox" name="is_public" value="true" />
                        Public?
                        </label>
                    </p>
                </div>
                <p>
                    <input type="submit" name="submit" value="Add to my collection" />
                </p>
            </form>
            
            <div class="clear"></div>
            
            <h3>Tags</h3>
            <ul class="tags">
                <li><a href="">scroller</a></li>
                <li><a href="">twitter</a></li>
                <li><a href="">tweet</a></li>
                <li><a href="">minimal</a></li>
                <li><a href="">customizable</a></li>
                <li><a href="">jquery</a></li>
                <li><a href="">javascript</a></li>
                <li><a href="">widget</a></li>
                <li><a href="">social</a></li>
                <li><a href="">networks</a></li>
            </ul>
        </div>
        <div class="clear"></div>
        <script type="text/javascript">
$(function() {
    ItemDetail.run();
});
        </script>
    </div><!-- /main -->
    
    
    <div class="container_12" id="footer">
        <div class="grid_3">
            <ul>
                <li><a href="category.html" title="View all items in [Category]">Category</a></li>
                <li><a href="category.html" title="View all items in [Category]">Category</a></li>
                <li><a href="category.html" title="View all items in [Category]">Category</a></li>
                <li><a href="category.html" title="View all items in [Category]">Category</a></li>
                <li><a href="category.html" title="View all items in [Category]">Category</a></li>
                <li><a href="category.html" title="View all items in [Category]">Category</a></li>
                <li><a href="category.html" title="View all items in [Category]">Category</a></li>
                <li><a href="category.html" title="View all items in [Category]">Category</a></li>
            </ul>
        </div>
        
        <div class="grid_3">            
            <ul>
                <li><a href="">Subscribe to blog</a></li>
                <li><a href="">Follow us on Twitter</a></li>
                <li><a href="">Become a fan on Facebook</a></li>
                <li><a href="">RSS feed</a></li>
            </ul>            
        </div>
        
        <div class="grid_3">
            <h3>Monthly newsletter</h3>
            <form name="" action="" method="post">
                <p>
                    <label>First Name<br />
                    <input type="text" class="text" name="first_name" id="first_name" value=""></label>
                </p>
                <p>
                    <label>Last Name<br />
                    <input type="text" class="text" name="first_name" id="first_name" value=""></label>
                </p>
                <p>
                    <label>Email<br />
                    <input type="text" class="text" name="first_name" id="first_name" value=""></label>
                </p>
                <p>
                    <input type="submit" name="submit" value="Subscribe" />
                </p>
            </form>
        </div>
        
        <div class="grid_3">
            <h3>Help & Support</h3>
            <ul>
                <li><a href="" title="">FAQ</a></li>
                <li><a href="" title="">Contact</a></li>
                <li><a href="" title="">About</a></li>
            </ul>
            
            <h3>Statistics</h3>
            <p>Total members<br />
                <span>9999999</span>
            </p>
            <p>Total members<br />
                <span>9999999</span>
            </p>
        </div>
        
        <div class="clear"></div>
        <div class="grid_9">Copyright &copy; 2011</div>
        <div class="grid_3">A production of cLGt Team</div>
        <div class="clear"></div>
    </div><!-- /footer -->
</div>
</body>
</html>